<template>
  <div class="toast" v-show="isShow">
    <div>{{content}}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      content: '', // 显示文字的变量
      isShow: false // 控制是否显示的变量
    }
  },
  methods: {
    show(msg, delay) { // 显示toast的方法 （通过插件封装！！！）
   
      this.isShow = true;
      this.content = msg;

      setTimeout(() => { // 定时器取消消失和文字还原
        this.content = '';
        this.isShow = false;
      }, 1000);
    }
  }
}
</script>

<style scoped>
  .toast{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999999;
    
    padding: 8px 10px;
    border-radius: 8px;

    background-color: rgba(0, 0, 0, .75);
    color: #fff;
  }
</style>